// 热门城市
<template>
  <div class="hot-city" v-if="cityList.hotcitys.length > 0">
    <h4 class="hot-city-title">热门城市</h4>
    <div class="hot-city-list">
      <span
        class="city"
        v-for="city in cityList.hotcitys"
        :key="city.city_id"
        @click="onSelectHotCity(city)"
        >{{ city.hotcity_name }}</span
      >
    </div>
  </div>
</template>
<script>
export default {
  name: "hotCity",
  props: {
    cityList: {
      type: Object,
      default: () => {},
    },
  },
  methods: {
    // 选择热门城市
    onSelectHotCity(city) {
      const { province_name, cities, province_id } = this.cityList.cities.find(
        (cityItem) => {
          return cityItem.province_id === city.province_id;
        }
      );

      const { childs, code, name } = this.cityList.city_areas.find(
        (cityItem) => {
          return city.city_id === cityItem.code;
        }
      );

      const cityHeadTabs = [
        {
          name: province_name,
          id: province_id,
        },
        {
          name: name,
          id: code,
        },
      ];

      this.$emit("checkHotCity", cityHeadTabs, cities, childs);
    },
  },
};
</script>
<style lang="scss" scoped>
.hot-city {
  .hot-city-title {
    text-indent: 16px;
    font-size: 14px;
    line-height: 40px;
    color: #999;
    text-align: left;
    letter-spacing: 2px;
  }
  .hot-city-list {
    display: flex;
    flex-wrap: wrap;
    padding-left: 16px;
    .city {
      padding: 4px 20px 5px;
      margin-right: 20px;
      margin-bottom: 10px;
      border-radius: 16px;
      font-size: 14px;
      background-color: #f3f3f3;
    }
  }
}
</style>